<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="themes/base.min.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.structure-1.4.5.min.css" />
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <title>客服设置</title>
    <style type="text/css">
        .ui-page-theme-a .ui-btn.changed {
            background-color: #3388cc;
            color: #fff;
        }

        h3.ui-bar.ui-bar-a {
            margin-bottom: 0px;
        }

        .summary {
            font-size: 12px;
        }
        .multiple .ui-controlgroup-controls{
            display: flex;
            justify-content: space-between;
        }
        .upload{
            width: 300px;
            height: 300px;
            position: relative;
        }
        .qrcode{
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: url() center center no-repeat;
        }
        .progress{
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1;
            color: #fff;
        }
        .ui-field-contain{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .message{
            position: fixed;
            bottom: 0px;
            left: 0px;
            width:100%;
            padding: 10px;
            text-align: center;
            box-sizing: border-box;
            color: white;
            font-size: 12px;
            display: none;
            background-color: green;
            font-weight: normal;
            margin: 0px;
        }
        .message.error{
            background-color: red;
        }
        .upload-contain{
            display: none;
        }
        #service_weixin_name{
            background: #ddd;
            text-align: center;
        }
        #service_weixin_name:focus{
            background-color: #fff;
        }
    </style>
</head>

<body>
    
    <div data-role="page" data-theme="a">
        <form name="settingForm" onsubmit="return false;">
            <div data-role="content" data-theme="a">
                <div class="ui-field-contain">
                    <label for="service_weixin_enabled">开启兑奖客服</label>
                    <input type="checkbox" data-role="flipswitch" name="service_weixin_enabled" id="service_weixin_enabled" data-on-text="开启" data-off-text="关闭" data-wrapper-class="custom-label-flipswitch">
                </div>
                <div class="ui-field-contain upload-contain">
                    <label for="service_weixin_name">客服微信号</label>
                    <input type="text" id="service_weixin_name" placeholder="请填写客服微信号">
                    <p class="summary">顾客可快速复制微信添加为好友</p>
                </div>
                <div class="ui-field-contain upload-contain">
                    <label>客服微信名片</label>
                    <div class="upload">
                        <div class="progress"></div>
                        <img class="qrcode" src="https://cdn.image.b2wx.com/blank_upload.png?imageView2/5/w/300/h/300"/>
                    </div>
                    <span style="display: none">
                        <input type="file" name="file" accept="image/*" id="qrcode_file">
                        </span>
                    <p class="summary">请上传客服人员微信二维码名片</p>
                </div>
                
            </div>
        </form>
    </div>
    <p class="message"></p>
    <script type="text/javascript">
        //防止token变更
        document.cookie.split(" ").join("").split(";").forEach(function(cookie){
            if(cookie.indexOf("token")==0){
                let hostname = window.location.hostname.substring(window.location.hostname.indexOf("."));
                let token = cookie.split("=")[1];
                let fn = function(){
                    document.cookie = "token="+ escape (token) + ";domain="+hostname+";path=/";
                };
                document.addEventListener("mousedown",fn);
                document.addEventListener("touchstart",fn);
                document.addEventListener("click",fn);
            }
        });
        var apiHost = "https://" + window.location.hostname + "/plugin/api";
        var key = 'plugin.zhuanpan.setting';

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
        var app_id = GetQueryString("app_id");
        let setting = {};
        let uploadKey = null;
        function showMessage(message,error){
            if(error){
                $(".message").addClass("error");
            }else{
                $(".message").removeClass("error");
            }
            $(".message").html(message).show(250);
            setTimeout(function(){
                $(".message").hide(250);
            },2000);
        }
        function save(){
            $.ajax({
                url: apiHost + "/cache.app.set?app_id=" + app_id + "&key=" + key,
                type: "POST",
                contentType: "text/plain; charset=utf-8",
                data: JSON.stringify(setting),
                error: function(jqXHR) {
                    alert(jqXHR.responseJSON.message);
                },
                success:function(){
                    showMessage("保存设置成功！");
                },
                complete: function(res) {
                    $.mobile.loading( "hide" );
                }
            });
        }
        function load() {
            let form = document.settingForm;
            $.ajax({
                url: apiHost + "/cache.app.get?app_id=" + app_id + "&key=" + key,
                type: "GET",
                dataType: "json",
                success: function(res) {
                    if (res) {
                        setting = res;
                        if(setting.service_weixin_qrcode){
                           $(".qrcode").prop("src",setting.service_weixin_qrcode+"?imageView2/2/w/300") ;
                        }
                        $("#service_weixin_enabled").prop("checked",setting.service_weixin_enabled==true).flipswitch("refresh");
                        if(setting.service_weixin_enabled==true){
                            $(".upload-contain").css("display","flex");
                        }else{
                            $(".upload-contain").css("display","none");
                        }
                        $("#service_weixin_name").val(setting.service_weixin_name);
                        
                    }
                },
                complete:function(){
                    $(function() {
                        $(".upload").click(function(){
                            $("#qrcode_file").click();
                        });
                        $("#qrcode_file").change(function(){
                            uploadKey = "plugin/zhuanpan/"+new Date().getTime();
                            $(".progress").css("display","flex").html("0%");
                            var formData = new FormData(form);
                            $.ajax({
                                url:"https://cdn.upload.b2wx.com?key="+uploadKey+"&Content-Type=image",
                                type:"POST",
                                processData:false,
                                contentType:false,
                                cache:false,
                                data:formData,
                                xhr: function(){
                                    let myXhr = $.ajaxSettings.xhr();  
                                    if(myXhr.upload){
                                        myXhr.upload.addEventListener('progress',function(uploadEvent){
                                            if (uploadEvent.lengthComputable) {
                                                $(".progress").html(parseInt(uploadEvent.loaded/uploadEvent.total*100)+"%");
                                            }
                                        }, false);   
                                    }
                                    return myXhr;
                                },
                                success:function(){
                                    setting.service_weixin_qrcode = "https://cdn.image.b2wx.com/"+uploadKey;
                                    $(".qrcode").prop("src",setting.service_weixin_qrcode+"?imageView2/2/w/300") ;
                                    $.mobile.loading( "show" );
                                    $(".progress").html("正在保存...");
                                    save();
                                },
                                error:function(){
                                    showMessage("上传失败！");
                                },
                                complete:function(){
                                    $(".progress").css("display","none")
                                }
                            });
                        });
                    });
                    $("#service_weixin_enabled").change(function(){
                        if(this.checked){
                            $(".upload-contain").css("display","flex");
                        }else{
                            $(".upload-contain").css("display","none");
                        }
                        setting.service_weixin_enabled = this.checked;
                        save();
                    });
                     $("#service_weixin_name").change(function(){
                        setting.service_weixin_name = this.value;
                        save();
                     });
                }
            });

        }
        load();
    </script>
</body>

</html>
